<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
  <title></title>
  <style type="text/css">
  .m1{background: url(images/m1.png) center no-repeat;width: 68px;height: 69px;}
  .m2{background: url(images/m2.png) center no-repeat;width: 68px;height: 69px;}
  .play{
     -webkit-animation: play 4s linear infinite;
    animation: play 4s linear infinite;
    }

    @-webkit-keyframes play{
        0%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
        100%{transform:rotate:(0deg);-webkit-transform:rotate:(0deg);}
    }   
    @keyframes play{
        0%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
        100%{transform:rotate:(0deg);-webkit-transform:rotate:(0deg);}
    }   
  </style>
<script  type="text/javascript">
window.onload=function(){
  var music = document.getElementById("music_pic");
  var audio = document.getElementsByTagName("audio")[0];

//当音乐播放停止时，自动停止光盘旋转
  audio.addEventListener("ended", function(event){
    music.setAttribute("class","");
  },false);
  // music.onclick = function(){
  //   if(audio.paused){
  //     audio.play();
  //     this.setAttribute("class","play");
  //     // this.style.animationPlayState = "running";
  //     // this.style.webkitAnimationPlayState = "running";不兼容Iphone6以下
  //   }else{
  //     audio.pause();
  //     this.setAttribute("class","");
  //     //this.style.webkitAnimationPlayState="paused";
  //   }
  // }
  music.addEventListener("touchstart",function(event){
     if(audio.paused){
      $(this).addClass("play");
      audio.play();
      $(this).addClass("m1").removeClass("m2");

    }else{
       $(this).removeClass("m1").addClass("m2");
      audio.pause();
       $(this).removeClass("play");
    }
  },false);

}


</script> 
</head>
<body>
 <div class="page-container">
<div class="testMusic play m1" id="music_pic"></div>
<audio autoplay src="ct.mp3"></audio>

</body>
<script src="js/jquery-1.8.3.min.js"></script>
</html>